<template>
	<view class="order">
		<view class="title u-flex-between">
			<view class="title-left">我的订单</view>
			<view class="title-right u-flex" @click="$navigateTo('/subPackages/order/order-list')">
				<view class="title-all">全部</view>
				<u-icon name="arrow-right" color="#CDCDCD" size="12"></u-icon>
			</view>
		</view>
		<view class="order-content u-flex-between">
			<view class="li" @click="$navigateTo('/subPackages/order/order-list?current=1')">
				<image class="li-image" :src="$getImageUrl('/user_client/static/icons/dfk.svg')"></image>
				<view class="li-text">待付款</view>
				<view class="li-number" v-if="orderTotal.unpaid">
					{{orderTotal.unpaid < 100?orderTotal.unpaid:'99+'}}
				</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/order/order-list?current=2')">
				<image :src="$getImageUrl('/user_client/static/icons/order-status-2.png')" mode="aspectFit" class="li-image"></image>
				<view class="li-text">待发货</view>
				<view class="li-number" v-if="orderTotal.unshipped">
					{{orderTotal.unshipped < 100?orderTotal.unshipped:'99+'}}
				</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/order/order-list?current=3')">
				<image class="li-image" :src="$getImageUrl('/user_client/static/icons/dsh.svg')"></image>
				<view class="li-text">待收货</view>
				<view class="li-number" v-if="orderTotal.not_received">
					{{orderTotal.not_received < 100?orderTotal.not_received:'99+'}}
				</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/order/order-list?current=4')">
				<image class="li-image" :src="$getImageUrl('/user_client/static/icons/pj.svg')"></image>
				<view class="li-text">待评价</view>
				<view class="li-number" v-if="orderTotal.not_comment">
					{{orderTotal.not_comment < 100?orderTotal.not_comment:'99+'}}
				</view>
			</view>
			<view class="li" @click="$navigateTo('/subPackages/order-refund/refund-list')">
				<image class="li-image" :src="$getImageUrl('/user_client/static/icons/sh.svg')"></image>
				<view class="li-text">退货/售后</view>
				<view class="li-number" v-if="orderTotal.refund_number">
					{{orderTotal.refund_number < 100?orderTotal.refund_number:'99+'}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "order",
		data() {
			return {};
		},
		// 此处定义传入的参数
		props: {
			orderTotal: {
				type: Object,
				default: {},
			},
		},
		mounted() {},
		methods: {}
	}
</script>
<style lang="scss" scoped>
	.order {
		width: 100%;
		padding: 30rpx;
		box-sizing: border-box;
		background-color: #FFFFFF;
		border-radius: 24rpx;
		// box-shadow: 0rpx 10rpx 15rpx 0rpx #f9f9f9;

		.title {
			font-size: 26rpx;
			line-height: 1;

			.title-left {
				color: #020202;
			}

			.title-right {
				font-size: 24rpx;
				color: #686868;
			}
		}

		.order-content {
			padding: 30rpx 10rpx 0;

			.li {
				width: 16%;
				position: relative;

				.li-image {
					width: 50rpx;
					height: 50rpx;
					display: block;
					margin: 0 auto;
				}

				.li-text {
					padding-top: 15rpx;
					line-height: 1;
					font-size: 22rpx;
					color: #020202;
					text-align: center;
				}

				.li-number {
					min-width: 28rpx;
					padding: 0 5rpx;
					height: 28rpx;
					line-height: 28rpx;
					position: absolute;
					top: -10px;
					right: 5px;
					border-radius: 100rpx;
					color: #FFFFFF;
					font-size: 18rpx;
					text-align: center;
					background-color: #CC242B;
					box-sizing: border-box;
				}
			}
		}
	}
</style>